<template>
    <div class="banner">
        <swiper :options="swiperOption" v-if="showSwiper">
            <swiper-slide v-for="(v,i) in imglist" :key="i"><img :src="v.imgUrl" alt=""></swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
export default {
    name:'banner',
    props:['imglist'],
    computed:{
        showSwiper () {
            return this.imglist.length;
        }
    },
    data () {
        return {
            swiperOption:{
                loop: true,
                loopAdditionalSlides:1,
                autoplay:true,
                pagination:{
                    el: '.swiper-pagination'
                }
            }
        }
    }
    
}
 
</script>

<style lang="less" scoped>
    *{
        margin: 0;
        padding: 0;
    }
    .banner{
        .swiper-slide img{
            width: 100%;
            height: auto;
        }
    }

</style>
